<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>task04</title>
	<style type="text/css">
		#div1{
			height: 200px;
		}
		#textarea{
			width: 200px;
			height:150px;
		}
		#div2{
			height:50px;
			margin-top: 10px;
		}
		.block{
			display: inline-block;
			width: 50px;
			height: 50px;
			background: red;
			color: #fff;
			text-align: center;
			line-height: 50px;
			margin-right: 10px;
		}
		.block2{
			display: inline-block;
			width: 50px;
			height: 50px;
			background: blue;
			color: #fff;
			text-align: center;
			line-height: 50px;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div id="div1">
		<!-- <input type="text" id="input"> -->
		<textarea id="textarea"></textarea>
		<button id="btn1">左侧入</button>
		<button id="btn2">右侧入</button>&nbsp;&nbsp;&nbsp;
		<button id="btn3">左侧出</button>
		<button id="btn4">右侧出</button>&nbsp;&nbsp;&nbsp;
		<button id="order-btn">按从小到大排序</button>
		<br/>
		<input type="text" id="input">
		<button id="search-btn">查找匹配方块</button>
		<button id="reset-btn">重置</button>
	</div>
	<div id="div2">
        <span class="block">10</span>
        <span class="block">3</span>
        <span class="block">7</span>
        <span class="block">12</span>
        <span class="block">11</span>
        <span class="block">30</span>
	</div>
</body>
<script type="text/javascript">
	
	

	function sildeInLeft(){
		var input = document.getElementById("input");	
		var div2 = document.getElementById('div2');

		var textArr = getContent();
		for(var i=0;i<textArr.length;i++){
			var span = document.createElement('span');
			span.className = "block";
			span.innerHTML = textArr[i];
			div2.insertBefore(span,div2.firstChild);
		}
	}

	function sildeInRight(){
		var input = document.getElementById("input");
		//var btn = document.getElementById("btn1");
		var span = document.createElement('span');
		var div2 = document.getElementById('div2');

		var textArr = getContent();
		for(var i=0;i<textArr.length;i++){
			var span = document.createElement('span');
			span.className = "block";
			span.innerHTML = textArr[i];
			div2.appendChild(span);
		}
		
	}

	//左侧出
	function slideOutLeft(){
		var span = document.getElementsByTagName('span');
		var div2 = document.getElementById('div2');
		var content = span[0].innerHTML;
		div2.removeChild(span[0]);
		alert(content);
	}
	//右侧出
	function slideOutRight(){
		var span = document.getElementsByTagName('span');
		var div2 = document.getElementById('div2');
		var length = span.length;
		var content = span[length-1].innerHTML;
		div2.removeChild(span[length-1]);
		alert(content);
	}
	//移除方块
	function removeSpan(){
		var span = document.getElementsByTagName("span");
			for(var i=0;i<span.length;i++){
			span[i].onclick = function(){
				this.remove();
			}
		}
	}
	//排序
	function orderSpan(){
		var t=0;
		var span = document.getElementsByTagName('span');
		for(var i=0;i<span.length;i++){
			for(var j=i+1;j<span.length;j++){
				if(parseInt(span[i].innerHTML)>parseInt(span[j].innerHTML)){
					t = span[i].innerHTML;
					span[i].innerHTML = span[j].innerHTML;
					span[j].innerHTML = t;
				}
			}
		}
	}
	//获取文本域内容
	function getContent(){
		var textarea = document.getElementById('textarea');
		var content = textarea.value;
		var textArr = new Array();
		textArr = content.split(',');
		return textArr;
	}
	//查找
	function searchBlock(){
		
	}

	function init(){
		var btn1 = document.getElementById("btn1");
		var btn2 = document.getElementById("btn2");
		var btn3 = document.getElementById("btn3");
		var btn4 = document.getElementById("btn4");

		btn1.onclick=function(){
			sildeInLeft();
			removeSpan();
			
		}
		btn2.onclick=function(){
			sildeInRight();
			removeSpan();
			
		}
		btn3.onclick=function(){
			slideOutLeft();
			removeSpan();
			
		}
		btn4.onclick=function(){
			 slideOutRight();
			 removeSpan();
			
		}

		var orderBtn = document.getElementById('order-btn');
		orderBtn.onclick = function(){
			orderSpan();
		}
		var search = document.getElementById('search-btn');
		search.onclick = function(){
			//alert(111)
			var input = document.getElementById('input');
			var content = input.value;
			console.log(content)
			var span = document.getElementsByTagName('span');
			for(var i=0;i<span.length;i++){
				console.log(span[i].innerHTML)
				if(span[i].innerHTML.indexOf(content)>=0){
					//alert(span[i].innerHTML)
					span[i].className = "block2";
				}
			}
		}

		var reset = document.getElementById('reset-btn');
		reset.onclick = function(){
			document.getElementById('input').value = "";
			var span = document.getElementsByTagName('span');
			for( var i=0;i<span.length;i++){
				//alert(111);
				span[i].className = "block";
			}
		}
	}

	init();


</script>
</html>